<template>
  <div class="win">
    <div class="nav_list_box">
      <div class="item" @click="greenShow(index)" v-for="(item, index) in navList" :key="index">
        <img :src="current==index?item.imgAct:item.img" />
        <p>{{item.name}}</p>
      </div>
    </div>
    <div class="white_space"></div>
    <div class="wait_pay_box">
      <noData v-if="order==''"></noData>
      <div class="item" v-for="(item, index) in order" :key="index">
        <div class="item_top_row">
          <p class="time">{{item.create_time}}</p>
          <p class="mode" v-if="current==0">待付款</p>
          <p class="mode" v-if="current==1">待发货</p>
          <p class="mode" v-if="current==2">待收货</p>
          <p class="mode" v-if="current==3">已收货</p>
        </div>
        <div class="goods_box">
          <div class="ite" v-for="(ite, k) in item.detail" :key="k">
            <div class="ite_row_box">
              <div class="name_box">
                <img :src="ite.image" />
                <p class="name ellipsis">{{ite.name}}</p>
              </div>
              <div class="money_box">
                <p class="number">x{{ite.num}}</p>
                <p class="money" v-if="item.type==2">{{ite.price}}积分</p>
                <p class="money" v-else>￥{{ite.price}}</p>
              </div>
            </div>
            <div class="bottom_liner"></div>
          </div>
        </div>
        <div class="total_money_box">
          <p v-if="item.type==2">合计：{{item.total_integral}}积分</p>
          <p v-else>合计：￥{{item.total_price}}</p>
          <div class="button_box">
            <button v-if="current==2" class="border_btn" @click="tapCargo(item.order_id)">确认收货</button>
            <p v-if="current==0" @click="popupTap(item.order_id)">取消订单</p>
            <button class="tap_detail" @click="hr_orderDetail(item)">查看详情</button>
          </div>
        </div>
      </div>
    </div>
    <i-modal :visible="popupShow" @ok="popupConfirm" @cancel="popupCancel">
      <view>确定要取消订单吗</view>
    </i-modal>
    <i-modal :visible="confirmCargo" @ok="confirmCargoOk" @cancel="confirmCargoCancel">
      <view>确定要确认收货吗</view>
    </i-modal>
    <i-toast id="toast" />
  </div>
</template>

<script>
import noData from "@/components/noData";
export default {
  data() {
    return {
      bjurl: "",
      navList: [], //顶部栏数据
      current: 0, //顶部栏切换
      order: [], //订单数据
      popupShow: false, //控制删除订单弹窗
      confirmCargo: false, //控制确认收货弹窗
      order_id: 0, //订单ID
      orderDetail: [] //订单详情
    };
  },
  methods: {
    // 请求接口取消订单
    getDeleteOrder() {
      this.$ajax("/home/order/cancelOrders", "post", {
        order_id: this.order_id
      })
        .then(res => {
          if (res.status) {
            this.$toast({
              content: "取消成功"
            });
            this.getOrderList();
          } else {
          }
        })
        .catch(err => {});
    },
    // 请求接口订单列表
    getOrderList() {
      this.$ajax("/home/integral/order_list", "post", {
        mark: this.current
      })
        .then(res => {
          
          if (res.status) {
            this.order = res.data;
          } else {
            this.order = "";
          }
        })
        .catch(err => {});
    },
    // 请求接口订单详情
    getOrderDetail(order_id) {
      this.$ajax("/home/order/getOrderDetail", "post", {
        order_id: order_id
      })
        .then(res => {
          
          if (res.status) {
            this.orderDetail = res.data;
            this.hr_orderConfirm();
          } else {
          }
        })
        .catch(err => {});
    },
    // 请求接口确认收货
    postConfirmCargo() {
      this.$ajax("/home/order/confirmCargo", "post", {
        order_id: this.order_id
      })
        .then(res => {
          if (res.status) {
            this.getOrderList();
          } else {
          }
        })
        .catch(err => {});
    },
    // 打开确认收货弹窗
    tapCargo(order_id) {
      this.order_id = order_id;
      this.confirmCargo = true;
    },
    //取消确认收货
    confirmCargoCancel() {
      this.confirmCargo = false;
    },
    // 确定确认收货收货
    confirmCargoOk() {
      this.confirmCargo = false;
      this.postConfirmCargo();
    },
    // 跳转到订单详情
    hr_orderDetail(item) {
      if (this.current == 0) {
        this.getOrderDetail(item.order_id);
      } else
        wx.navigateTo({
          url: "../orderDetail/main?order_id=" + item.order_id
        });
    },
    //跳转到订单确认
    hr_orderConfirm() {
      wx.navigateTo({
        url:
          "../orderConfirm/main?order_id=" +
          this.orderDetail.order_id +
          "&logistic_id=" +
          this.orderDetail.logistic_id +
          "&voucher_id=" +
          this.orderDetail.voucher_id +
          "&order_number=" +
          this.orderDetail.order_number
      });
    },

    // 打开取消订单弹窗
    popupTap(order_id) {
      this.order_id = order_id;
      this.popupShow = true;
    },
    // 取消
    popupCancel() {
      this.popupShow = false;
    },
    // 确定
    popupConfirm() {
      this.getDeleteOrder();
      this.popupShow = false;
    },
    // 切换显示列表
    greenShow(index) {
      if (index == this.current) return;
      else {
        this.current = index;
        this.getOrderList();
      }
    }
  },
  components: {
    noData
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.navList = navList;
    this.current = e.current;
    this.getOrderList();
  }
};
let imgurl = "https://socard.busypi.com/web_img/"
let navList = [
  {
    img: imgurl+"wait_pay.png",
    imgAct: imgurl+"wait_pay_act.png",
    name: "待付款"
  },
  {
    img: imgurl+"wait_delivery.png",
    imgAct: imgurl+"wait_delivery_act.png",
    name: "待发货"
  },
  {
    img: imgurl+"over_delivery.png",
    imgAct: imgurl+"over_delivery_act.png",
    name: "待收货"
  },
  {
    img: imgurl+"old_order.png",
    imgAct: imgurl+"old_order_act.png",
    name: "历史订单"
  }
];
</script>

<style lang="scss" scoped>
.win {
  .nav_list_box {
    z-index: 4;
    box-shadow: 1rpx 1rpx 20rpx 0rpx rgba(173, 173, 173, 0.4);
    background-color: #ffffff;
    padding: 0 20rpx;
    box-sizing: border-box;
    width: 750rpx;
    height: 190rpx;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    align-items: center;
    .item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #727272;
      font-size: 25rpx;
      img {
        margin-bottom: 16rpx;
        width: 64rpx;
        height: 64rpx;
      }
    }
  }
  .white_space {
    height: 210rpx;
  }
  .wait_pay_box {
    .item {
      box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(10, 13, 47, 0.05);
      width: 690rpx;
      box-sizing: border-box;
      margin: 0 auto 20rpx;
      background-color: #ffffff;
      .item_top_row {
        padding-left: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30rpx;
        box-sizing: border-box;
        height: 70rpx;
        .time {
          font-size: 20rpx;
          color: #727272;
        }
        .mode {
          margin-right: 26rpx;
          color: #747474;
          font-size: 20rpx;
          border: 2rpx solid $green;
          padding: 5rpx 20rpx 6rpx;
          border-radius: 4rpx;
        }
      }
      .goods_box {
        .ite {
          color: #333333;
          .ite_row_box {
            padding-left: 30rpx;
            margin: 20rpx 0 20rpx 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name_box {
              width: 67%;
              display: flex;
              align-items: center;
              img {
                width: 100rpx;
                height: 100rpx;
              }
              .name {
                margin-left: 20rpx;
                width: 260rpx;
                font-size: 24rpx;
              }
            }
            .money_box {
              width: 33%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 27rpx 0 0;
              box-sizing: border-box;
              .number {
                font-size: 22rpx;
              }
              .money {
                font-size: 25rpx;
              }
            }
          }
          .bottom_liner {
            width: 593rpx;
            height: 2rpx;
            background-color: #f2f2f2;
            margin: 0 auto;
          }
        }
      }
      .total_money_box {
        height: 80rpx;
        box-sizing: border-box;
        padding: 0 12rpx 0 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        color: #333333;
        .button_box {
          display: flex;
          align-items: center;
          p {
            color: #999999;
            font-size: 30rpx;
            text-decoration: underline;
          }
          button {
            margin-left: 40rpx;
            font-size: 26rpx;
            width: 150rpx;
            height: 50rpx;
            line-height: 50rpx;
            border-radius: 25rpx;
          }
          .tap_detail {
            color: #ffffff;
            background: linear-gradient(
              0deg,
              rgba(11, 208, 94, 1),
              rgba(11, 208, 173, 1)
            );
          }
          .border_btn {
            border: 2rpx solid $green;
            color: $green;
            background-color: transparent;
          }
        }
      }
    }
  }
}
</style>
